<template>
  <div id="app" >
    <h1 class="text-center">在线翻译</h1>
    <h5 class="text-center">简单 / 易用 / 便捷</h5>
    <translate-form @formPass="translateText"></translate-form>
    <translate-output :outputText='outputText'></translate-output>
  </div>
</template>

<script>
import axios from "Axios";

import TranslateForm from "./components/TranslateForm";
import TranslateOutput from "./components/TranslateOutput";

export default {
  name: "App",
  data() {
    return {
      outputText: ""
    };
  },
  methods: {
    translateText(text,language) {
      // this.outputText = text;
      axios.get(`https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20181113T141641Z.17f8c446bbcf37bb.5da3e51276833ff83303e64ac38f0c9e27efb0dd&lang=${language}&text=${text}`)
        .then((response) => {
          this.outputText = response.data.text[0];
          // console.log(this.outputText);
        })
        .catch((error) => {
          alert('请输入需要翻译的文字')
          // console.log(error);
        });
    }
  },
  components: {
    TranslateForm,
    TranslateOutput
  }
};
</script>

<style>
</style>
